<template>
	<div class="container">
		<!-- <navigationBar title="详情"></navigationBar> -->
		<!-- <div class="content" :style="'padding-top: ' + (navigationBarHeight) + 'px;'"></div> -->
		<div class="content">
			<!-- <div class="head">
			</div> -->
			<div class="card" v-for="(item,index) in list" :key="index">
				<div class="userInfo">
					<div class="left">
						<image class="user-img" :src="item.avatarPath" @click="$navSkin.toDetail(item.userId)" mode="aspectFill"></image>
						<div class="user-name">{{item.nickname}}</div>
					</div>
					<div class="right">
						<div class="time">{{item.clickDate}}</div>
						<image class="del" @click="deleteData(item.id,index)" src="../../static/icons/delete.png"
							mode=""></image>
					</div>
				</div>
				<!-- 标签列表 -->
				<tag :list="item.tags"></tag>
				<!-- 想法列表 -->
				<template>
					<view v-for="(itemChild,indexChild) in item.thoughts" :key="indexChild">
						<div class="thoughts" >
							<div class="desc">
								<span class="desc-txt">{{itemChild.content}}</span>
								<image class="del" @click="deleteThought(itemChild.id,indexChild,index)"
									src="../../static/icons/delete.png" mode=""></image>
							</div>
							<div class="photo-list" v-if="itemChild.picturePaths && itemChild.picturePaths.length >0">
								<div class="photo-item" v-for="(itemGrandson,indexGrandson) in itemChild.picturePaths"
									:key="indexGrandson">
									<image :src="itemGrandson" mode="aspectFill" @click="_previewImage(itemGrandson)">
									</image>
								</div>

							</div>
						</div>
						<div class="action-bar">
							<!-- 点赞数量 -->
							<div class="icon" @click="favoriteThought(itemChild.id,indexChild,index)">
								<image src="/static/icons/icon_dianzan.png" mode=""></image>
								<div>{{itemChild.favoriteUserList.length}}</div>
							</div>
							<!-- 评论数量 -->
							<div class="icon" @click="toComment(itemChild.id,indexChild,index)">
								<image src="/static/icons/icon_liuyan.png" mode=""></image>
								<div>{{itemChild.commentList.length}}</div>
							</div>
						</div>
						<!-- 点赞列表 -->
						<div class="like-list">
							<image class="like-img" v-for="(itemGrandson,indexGrandson) in itemChild.favoriteUserList"
									:key="indexGrandson" :src="itemGrandson.avatarPath" mode="aspectFill" ></image>
							<span class="like-num" v-if="itemChild.favoriteUserList.length > 0">等{{itemChild.favoriteUserList.length}}人点赞</span>
						</div>
						
						<!-- 评论列表 -->
						<div class="comment-list">
							<div class="comment-item" v-for="(itemGrandson,indexGrandson) in itemChild.commentList" :key="indexGrandson">
								<div class="userInfo" >
									<div class="left">
										<image class="user-img" :src="itemGrandson.avatarPath" mode="aspectFill"></image>
										<div class="user-name">{{itemGrandson.userName}}</div>
									</div>
									<div class="right">
										<div class="time">{{itemGrandson.commentTime}}</div>
										<!-- <image class="del" src="../../static/icons/delete.png" mode=""></image> -->
									</div>
								</div>
								<div class="comment-desc">
									{{itemGrandson.content}}
								</div>
							</div>
							<!-- <div class="more">查看更多留言 ></div> -->
						</div>
					</view>
				</template>


			</div>
		</div>
		<uni-popup ref="sendPopup" type="bottom" :maskClick="false">
			<div class="send-popup">
				<div class="send-head">
					<div class="textarea-wrap">
						<textarea maxlength="2000" v-model="comment_content" placeholder-style="color:#bcbcbc;padding:0;font-size:26rpx"
							placeholder="请输入你想留言的内容..." />
					</div>
					<div class="footer">
						<div class="btn" @click="close()">
							取消
						</div>
						<div class="btn submit" @click="addComment()">
							留言
						</div>
					</div>
				</div>
			</div>
		</uni-popup>
		<div class="content" v-show="list.length < 1">
			<empty title="暂无数据" setSrc="/static/icons/userNot.png"></empty>
		</div>
	</div>
</template>

<script>
	import data from '@/js/index/everybody/data.js';
	import methods from '@/js/index/everybody/methods.js';
	import uniPopup from "@/components/uni-popup/uni-popup.vue";
	import navigationBar from '../../components/navigationBar.vue';
	import tag from "@/components/tag.vue";
	import {
		mapState
	} from 'vuex';
	import empty from '../../components/empty.vue';
	export default {
		data,
		methods,
		onLoad(e) {
			this.getUserInfo()
			this.getPageList()
		},
		onShow() {

		},
		onPullDownRefresh() {
			this.page = 1
			this.list_rows = 10
			this.list = []
			this.getPageList()
			uni.stopPullDownRefresh()
		},
		onReachBottom() {
			this.getPageList()
		},
		onHide() {
			console.log('on hide')
		},
		onUnload() {},
		computed: {
			...mapState(['userInfo', 'navigationBarHeight']),
			bgHeight() {
				// #ifdef APP-PLUS
				return 250
				// #endif
				return this.navigationBarHeight + uni.upx2px(364);
			}
		},

		components: {
			uniPopup,
			navigationBar,
			tag,
			empty
		}
	};
</script>

<style>
	page {
		background-color: #f7f7f7;
	}

	/* uni-page{
   	background-color: #FFFFFF;
   } */
</style>
<style scoped lang="scss">
	@import '~@/style/index/everybody.scss';
</style>
